class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            playing:!0,
            canchou: !1,
            type: -1, //1谢谢参与 2周边 3腾讯 4酒
            showresult: !1,
            showinfomodal: !1,
            showafterinfo: !1,
            name: '', phone: '', addr: '',
            piece: {
                one: '',
                two: "",
                three: '',
                four: ''
            }
        };
    }










    componentDidMount() {
        let myphone = localStorage.getItem('phone')

        if (myphone != null) {
            myphone = maskPhoneNumber(myphone)
            this.setState({ myphone })
        }

           function playBackgroundMusic() {
            //  makeLog('play');
            var bgMusic = document.getElementById('bgmusic');
            console.log(bgMusic, 'bgMusic---');
            bgMusic.play();
            this.setState({ playing: !0 })
        }
        document.addEventListener(
            'WeixinJSBridgeReady',
            function () {
                console.log('WeixinJSBridgeReady---');
                // makeLog('WeixinJSBridgeReady');
                playBackgroundMusic();
                  
            },
            false
        );

        配置微信('lottery')
        // const link = document.createElement('a');
        // link.href = 'http://techcherry.cn/guoyuanh5/src/first_modalkuang.png';
        // link.download = "aaa";
        // document.body.appendChild(link);
        // link.click();
        // document.body.removeChild(link);



        当前碎片(res => {
            if (res.issuccess == 1) {
                let { data } = res, b = !1;
                if (data != null) {
                    if (data['one'] == 1
                        && data['two'] == 1
                        && data['three'] == 1
                        && data['four'] == 1
                    ) {
                        b = !0
                    }
                }
                this.setState({ canchou: b })
            }

        })
    }


    chou() {
        let { canchou } = this.state
        console.log(canchou, 'canchou');
       // canchou = !0;
        // this.setState({type:3})
        //1谢谢参与 2周边 3腾讯 4酒



        if (canchou) {
            开抽(res => {
                if (res.issuccess == 1) {
                    let type = res.name == 'THANKS' ? 1 : res.name == 'WINE' ? 4 : res.name == 'ZHOUBIAN' ? 2 : res.name == 'TX' ? 3 : ''
                    this.setState({ type })
                    setTimeout(() => {
                        this.setState({ showresult: !0, lotteryid: res.id })
                    }, 2500);
                } else {
                    alert(res.msg)
                }
            })
        } else {
            alert('您还未集齐碎片')
        }

    }
    inputchange(type, e) {
        this.setState({ [type]: e.target.value })
    }
    submit() {
        let { name, phone, addr, lotteryid } = this.state, err = ''
        console.log({ name, phone, addr, lotteryid });
        if (name == '') err = '姓名不能为空'
        if (addr == '') err = '请填写地址'
        if (phone.length != 11) err = '手机号输入有误'
        if (err != '') {
            alert(err)
        } else {
            填信息({ writephone: phone, writename: name, id: lotteryid,addr }, res => {
                if (res.issuccess == 1) {
                    this.setState({ showafterinfo: !0, showinfomodal: !1 })
                }
            })
        }


        // alert('提交成功')
        // window.location.href = './main.html'
    }

    playmusic() {
        var bgMusic = document.getElementById('bgmusic'), { playing } = this.state
        if (playing) {
            bgMusic.pause()
        } else {
            bgMusic.play();
        }
        this.setState({ playing: !playing })
    }



    render() {
        let { myphone, addr, phone,playing, name, type, showafterinfo, showresult, showinfomodal } = this.state

        return (
            <div className="app">

                <audio preload="auto" src="music.mp3" loop id="bgmusic" >
                </audio>
                <img onClick={this.playmusic.bind(this)} className={"musicicon " + (playing ? 'zhuan' : '')} src="./src/music.png" alt="" />

                <div className="myinfo">您好,{myphone}</div>
                <img loading="lazy" className="bg" src="./src/detail_bg.png" alt="" />
                <div style={{ display: showresult || showinfomodal ? 'none' : '' }} className="wrap">
                    <p className="word1">恭喜您拼出团圆「缘」，获得一次抽奖机会！</p>
                    <div className="zhuanpandiv">
                        <img  src="./src/zhizhen.png" alt="" className="zhizhen" />
                        <img  src="./src/zhuanpandi.png" alt="" className="di" />
                        <img loading="lazy" onClick={this.chou.bind(this)} className={'zhuanpan z' + type} src="./src/zhuanpan1.png" alt="" />


                    </div>
                    <p className="word2">规则说明：每个微信ID每天仅可合成抽奖一次</p>
                    <div className="btns">
                        <img onClick={this.chou.bind(this)} className="back" src="./src/choubtn.png" alt="" />
                        <img onClick={() => {
                            window.location.href = './main.html'
                        }} className="back" src="./src/back_btn.png" alt="" />
                    </div>

                </div>
                <div style={{ display: showresult && type == 1 ? '' : 'none' }} className="resultmodal">
                    <div className="mask"></div>
                    <img loading="lazy" onClick={() => {
                        window.location.href = './main.html'
                    }} src="./src/resultmodal_thanks.png" className="kuang" alt="" />
                    <img onClick={() => {
                        window.location.href = './main.html'
                    }} src="./src/close.png" className="close" alt="" />

                </div>

                <div style={{ display: showresult && type == 2 ? '' : 'none' }} className="resultmodal">
                    <div className="mask"></div>
                    <img loading="lazy" onClick={() => {
                        this.setState({ showinfomodal: !0, showresult: !1 })
                    }} src="./src/resultmodal_zhoubian.png" className="kuang" alt="" />
                    <img onClick={() => {
                        window.location.href = './main.html'
                    }} src="./src/close.png" className="close" alt="" />

                </div>

                <div style={{ display: showresult && type == 3 ? '' : 'none' }} className="resultmodal">
                    <div className="mask"></div>
                    <img loading="lazy" onClick={() => {
                        this.setState({ showinfomodal: !0, showresult: !1 })
                    }} src="./src/resultmodal_tx.png" className="kuang" alt="" />
                    <img onClick={() => {
                        window.location.href = './main.html'
                    }} src="./src/close.png" className="close" alt="" />

                </div>

                <div style={{ display: showresult && type == 4 ? '' : 'none' }} className="resultmodal">
                    <div className="mask"></div>
                    <img loading="lazy" onClick={() => {
                        this.setState({ showinfomodal: !0, showresult: !1 })
                    }} src="./src/resultmodal_wine.png" className="kuang" alt="" />
                    <img onClick={() => {
                        window.location.href = './main.html'
                    }} src="./src/close.png" className="close" alt="" />

                </div>

                <div style={{ display: showafterinfo ? '' : 'none' }} className="resultmodal">
                    <div className="mask"></div>
                    <img onClick={() => {
                        window.location.href = './main.html'
                    }} src="./src/info_submit.png" className="kuang" alt="" />
                    <img onClick={() => {
                        window.location.href = './main.html'
                    }} src="./src/close.png" className="close" alt="" />

                </div>


                <div style={{ display: showinfomodal ? '' : 'none' }} className="infomodal">
                    <p className="word1">恭喜您获得团缘奖励</p>
                    <p className="word1">请您如实填写以下信息</p>
                    <div className="infodiv">
                        <div>
                            <p>*姓名</p>
                            <input type="text" onChange={this.inputchange.bind(this, "name")} value={name} />
                        </div>
                        <div>
                            <p>*电话</p>
                            <input type="text" maxLength={11} onChange={this.inputchange.bind(this, "phone")} value={phone} />
                        </div>
                        <div>
                            <p>*地址</p>
                            <input type="text" onChange={this.inputchange.bind(this, "addr")} value={addr} />
                        </div>
                    </div>
                    <div className="btns">

                        <img onClick={this.submit.bind(this)} className="back" src="./src/tijiaobtn.png" alt="" />
                    </div>
                    <img onClick={() => {
                        window.location.href = './main.html'
                    }} src="./src/close.png" className="close" alt="" />

                </div>



            </div>


        )
    }
}

ReactDOM.render(
    <div>
        {/* <TopLine /> */}
        <div id='body'>

            <Main />
        </div>
    </div>
    // <Barrage />
    , $('.container')[0]
)